<script setup lang="ts">
// 1.引入自定义的导航组件
import CustomNavbar from './components/CustomNavbar.vue'
import { getHomeBannerAPI, getHomeCategoryAPI } from '@/services/home'
import type { BannerItem, CategoryItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import CategoryPanel from './components/CategoryPanel.vue'
import type { KttGuessInstance } from '@/types/component'
import KttGuess from '@/components/KttGuess.vue'
import KttSwiper from '@/components/KttSwiper.vue'

/**
 * 首页-轮播图
 */
//用来保存获取到的轮播图列表数据
const bannerList = ref<BannerItem[]>([])
//获取轮播图数据
const getHomeBannerData = async () => {
  //调用getHomeBannerAPI()事件向后端发送ajax请求，用用来获取轮播图相关数据
  //res得到的是Data<BannerItem[]>
  //res.result的到后端响应过来的轮播图列表
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

/**
 * 首页-前台分类
 */
//用来保存获取到的前台分类列表数据
const categoryList = ref<CategoryItem[]>([])
//获取前台分类数据
const getHomeCategoryData = async () => {
  //调用getHomeCategoryAPI()函数向后端发送ajax请求，用来获取前台分类相关数据
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

//获取KttGuess组件的实例
const kttGuess = ref<KttGuessInstance>()

//触底事件
const Onscrolltolower = () => {
  // console.log('触底了...')
  kttGuess.value?.getMore()
}
//是否开启或者关闭下拉刷新动画，false表示关闭下拉刷新动画，true表示开启下拉刷新动画
const isTriggered = ref<boolean>(false)

//下拉刷新事件
const Onrefresherrefresh = async () => {
  // console.log('刷新中...')
  isTriggered.value = true
  //使用promise.all同时调用getHomeBannerData()和getHomeCategoryData()，
  // 当下拉刷新时，这两个函数会一起封装一个promise对象
  await Promise.all([getHomeBannerData(), getHomeCategoryData()])
  //等到上述方法执行完毕后，关闭下拉刷新动画
  isTriggered.value = false
}

//在窗口加载事件调用getHomeBannerData()
onLoad(() => {
  //首页-轮播图
  getHomeBannerData()
  //首页-前台分类
  getHomeCategoryData()
})
</script>

<template>
  <!-- 2.以标签的形式进行使用 -->
  <!-- 顶部导航条  -->
  <custom-navbar />
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="Onscrolltolower()"
    refresher-enabled
    @refresherrefresh="Onrefresherrefresh"
    :refresher-triggered="isTriggered"
  >
    <!-- 将bannerList作为属性值传递到子组件中，在子组件中使用v-for动态循环轮播图列表数据 -->
    <!-- 广告轮播图 -->
    <KttSwiper :list="bannerList" />
    <!-- 前台分类列表 -->
    <CategoryPanel :list="categoryList" />
    <!-- 猜你喜欢列表 -->
    <KttGuess ref="kttGuess" />
  </scroll-view>
</template>

<style lang="scss">
//page表示body节点是页面的根节点
page {
  background-color: #f7f7f7; //设置页面背景颜色
  height: 100%; //让页面撑满整个屏幕
  display: flex; //设置页面为弹性盒布局
  flex-direction: column; //让子元素的垂直排列
}
.scroll-view {
  flex: 1; //让scroll-view填充page的剩余高度
}
</style>
